<%--
  Created by IntelliJ IDEA.
  User: Kristina
  Date: 2020/7/25
  Time: 17:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>物流追踪</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=" Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <%--jq--%>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.5.1.js" type="text/javascript"></script>
    <%--    laiui 框架--%>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript"
            charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <%--    bootstrap 框架--%>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css" type='text/css'>
    <%--    font-awesome 图标库--%>
    <link href="${pageContext.request.contextPath}/front/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <%--    高德地图API--%>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=5702b4a78aee7e6d4704e647d45a5e5d&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch,AMap.Geolocation,AMap.MouseTool"></script>
    <%--    项目 css--%>
    <link href="${pageContext.request.contextPath}/front/css/style.css" rel="stylesheet" type="text/css"/>
    <script src="${pageContext.request.contextPath}/front/js/publicFunctions.js" type="text/javascript"></script>
    <%--    <script src="${pageContext.request.contextPath}/static/clipboard.js-master/dist/clipboard.js" type="text/javascript"></script>--%>
    <style>
        #trackFormPanel:hover {
            transition: .6s;
            box-shadow: 0 0.5rem 1rem black;
            /*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);*/
        }
    </style>
</head>
<body class="layui-bg-gray">
<!-- //header -->
<header id="header" style="z-index: 51" class="pb-2 layui-bg-cyan">
    <div class="mx-auto d-flex pt-3 w-75">
        <!-- top header -->
        <%--        <div class="d-flex pt-3">--%>
        <div id="logo" class="align-self-center">
            <h1>
                <a href="${pageContext.request.contextPath}/index.jsp" style="text-shadow: 2px 2px black">码上物流</a>
            </h1>
        </div>
        <div class="align-self-center ml-5">
            <nav class="nav pt-2">
                <ul class="mt-2">
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/about.jsp">About Us</a>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/services.html">Services</a>
                    </li>
                    <li class="mr-3 mr-2 p-0">
                        <!-- First Tier Drop Down -->
                        <label for="drop-2" class="toggle">Dropdown<span class="fa fa-angle-down"
                                                                         aria-hidden="true"></span>
                        </label>
                        <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                        <input type="checkbox" id="drop-2"/>
                        <ul class="inner-dropdown rounded">
                            <li>
                                <a href="${pageContext.request.contextPath}/front/gallery.html">Our Gallery</a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/front/error.html">404 Error Page</a>
                            </li>
                            <li>
                                <a href="#">Add Link</a>
                            </li>
                        </ul>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/contact.html">Contact</a>
                    </li>
                    <li class="">
                        <a href="#subscribe">关于我们</a>
                    </li>
                </ul>
            </nav>
        </div>
        <%--        登录用户容器--%>
        <div id="userDiv" class="ml-auto top-grid d-flex"></div>
        <div class="d-flex ml-3 pb-2">
            <a href="javascript:void(0)" class="city text-white align-self-end"></a>
            <a href="javascript:void(0)" onclick="detectLocation()"
               class="fa fa-2x fa-location-arrow ml-3 location-icon align-self-end"></a>
        </div>
        <!-- top header -->

    </div>
</header>
<!-- //header -->
<div class="contact m-4">
    <div class="w-50 mx-auto display-4 text-center font-weight-bold pb-4">查看全国仓库网点</div>
    <div id="housesMap" class="d-flex p-2 shadow-lg">
        <div class="card w-25">
            <h4 class="card-header font-weight-bold bg-primary text-white text-center">全国仓库查询</h4>
            <div class="card-body">
                <div class="form-group">
                    <div class="input-item-prepend"><span class="input-item-text">省市区</span></div>
                    <select id='province' class="form-control" onchange='search(this)'></select>
                </div>
                <div class="form-group">
                    <div class="input-item-prepend"><span class="input-item-text">地级市</span></div>
                    <select id='city' class="form-control" onchange='search(this)'></select>
                </div>
                <div class="form-group">
                    <div class="input-item-prepend"><span class="input-item-text">区县</span></div>
                    <select id='district' class="form-control" onchange='search(this)'></select>
                </div>
                <div class="form-group">
                    <div class="input-item-prepend"><span class="input-item-text">街道</span></div>
                    <select id='street' class="form-control" onchange='setCenter(this)'></select>
                </div>
                <div class="form-group">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <input type="radio" lay-filter="houseLevel" name="houseLevel" title="仅一级" value=1
                                   lay-skin="primary" checked>
                            <input type="radio" lay-filter="houseLevel" name="houseLevel" title="仅二级" value=2
                                   lay-skin="primary" checked>
                            <input type="radio" lay-filter="houseLevel" name="houseLevel" title="显示所有" value=0
                                   lay-skin="primary" checked>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div id="container" class="w-100" style="height: 700px">


        </div>
    </div>
</div>
<!-- //contact -->
<!-- footer-top -->
<section class="footer-top py-5">
    <div class="container">
        <div class="row footer-top-grid">
            <div class="col-sm-6">
                <h3>Contact Us</h3>
                <p>Call us, we are 24/7 Helpline</p>
            </div>
            <div class="col-sm-6 text-sm-right mt-sm-0 mt-3">
                <h3><span class="fa fa-phone" aria-hidden="true"></span> +11 2345 6789</h3>
            </div>
        </div>
    </div>
</section>
<!-- //footer-top -->
<!--footer -->
<div class="footer footer_w3layouts_section_1its py-5" id="subscribe">
    <div class="container pt-sm-4">
        <div class="row footer-grid">
            <div class="col-md-5 footer-grid_section_1its_w3">
                <div class="footer-title">
                    <h3>Who we are</h3>
                </div>
                <div class="footer-text">
                    <p>Curabitur non nulla sit amet nislinit tempus ipsum convallis quis ac lectus. lac inia eget
                        consectetur sed, convallis at tellus. Nulla porttitor accumsana tincidunt. Vestibulum ante ipsum
                        primis tempus.</p>
                    <ul class="social_section_1info">
                        <li>
                            <a href="#" class="w3_facebook"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_google"><i class="fa fa-google-plus"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3 col-sm-5 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Useful Links</h3>
                </div>
                <ul class="links">
                    <li>
                        <a href="about.html">About Our Company</a>
                    </li>
                    <li>
                        <a href="services.html">Logistics Services</a>
                    </li>
                    <li>
                        <a href="#">Terms & Conditions</a>
                    </li>
                    <li>
                        <a href="#">Privicy Policy</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-7 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Subscribe</h3>
                </div>
                <div class="footer-text">
                    <p>By subscribing to our mailing list you will get latest news and updates from us.</p>
                    <form action="#" method="post">
                        <input type="email" name="Email" placeholder="Enter your email..." required="">
                        <button class="btn1"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        <div class="clearfix"></div>
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- move top -->
        <div class="move-to-top text-center">
            <a href="#home" class="move-top"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
        </div>
        <!-- //move top -->
        <div class="copyright">
            <p>© 2019 Logistic. All Rights Reserved | Design by
                <a href="http://w3layouts.com/">W3layouts</a>
            </p>
        </div>
    </div>
</div>
<input type="hidden" id="orderIdText" value="23">
<!-- //footer -->
<script src="${pageContext.request.contextPath}/front/js/fastLogin.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/front/js/ipLocation.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/front/js/publicFunctions.js" type="text/javascript"></script>

<script>
    const webServKey = "2fddcdbc01f779d6382b8439a7279f3e";
    let maps = [];
</script>
<script>
    $(function () {
        if ("${sessionScope.user.userId}" !== '') {
            loginUser = {};
            loginUser.userId = "${sessionScope.user.userId}";
            loginUser.userName = "${sessionScope.user.userName}";
            loginUser.userFace = "${sessionScope.user.userFace}";
            loginUser.uaerPhone = "${sessionScope.user.userPhone}";
        }
        // 加载layui模块
        // 加载layui模块
        layui.use('form', function () {
            form = layui.form;
            form.on('radio(houseLevel)', function (data) {
                console.log(data.value); //复选框value值，也可以通过data.elem.value得到
                $.ajax({
                    async: true,
                    type: "get",
                    url: "/user/getHouseByLevel",
                    data: {level: data.value},
                    success: function (result) {
                        renderMap(result);
                    },
                    error: function () {
                        alert("异步请求失败！");
                    }
                });
            });
        });
        detectLocation();
        // 检测登陆
        detectLogin();
    })


    function renderMap(data) {
        console.log(data);
    }

    var map, district, polygons = [], citycode;
    var citySelect = document.getElementById('city');
    var districtSelect = document.getElementById('district');
    var areaSelect = document.getElementById('street');
    map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.30946, 39.937629],
        zoom: 4
    });
    //行政区划查询
    var opts = {
        subdistrict: 1,   //返回下一级行政区
        showbiz: false  //最后一级返回街道信息
    };
    district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
    district.search('中国', function (status, result) {
        if (status === 'complete') {
            getData(result.districtList[0]);
        }
    });

    function getData(data, level) {
        var bounds = data.boundaries;
        if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
                var polygon = new AMap.Polygon({
                    map: map,
                    strokeWeight: 1,
                    strokeColor: '#0091ea',
                    fillColor: '#80d8ff',
                    fillOpacity: 0.2,
                    path: bounds[i]
                });
                polygons.push(polygon);
            }
            map.setFitView();//地图自适应
        }

        //清空下一级别的下拉列表
        if (level === 'province') {
            citySelect.innerHTML = '';
            districtSelect.innerHTML = '';
            areaSelect.innerHTML = '';
        } else if (level === 'city') {
            districtSelect.innerHTML = '';
            areaSelect.innerHTML = '';
        } else if (level === 'district') {
            areaSelect.innerHTML = '';
        }

        var subList = data.districtList;
        if (subList) {
            var contentSub = new Option('--请选择--');
            var curlevel = subList[0].level;
            var curList = document.querySelector('#' + curlevel);
            curList.add(contentSub);
            for (var i = 0, l = subList.length; i < l; i++) {
                var name = subList[i].name;
                var levelSub = subList[i].level;
                var cityCode = subList[i].citycode;
                contentSub = new Option(name);
                contentSub.setAttribute("value", levelSub);
                contentSub.center = subList[i].center;
                contentSub.adcode = subList[i].adcode;
                curList.add(contentSub);
            }
        }

    }

    function search(obj) {
        //清除地图上所有覆盖物
        for (var i = 0, l = polygons.length; i < l; i++) {
            polygons[i].setMap(null);
        }
        var option = obj[obj.options.selectedIndex];
        var keyword = option.text; //关键字
        var adcode = option.adcode;
        district.setLevel(option.value); //行政区级别
        district.setExtensions('all');
        //行政区查询
        //按照adcode进行查询可以保证数据返回的唯一性
        district.search(adcode, function (status, result) {
            if (status === 'complete') {
                getData(result.districtList[0], obj.id);
            }
        });
    }

    function setCenter(obj) {
        map.setCenter(obj[obj.options.selectedIndex].center)
    }


    $(document).on('mouseover', '.fa-user-circle-o', function () {
        $(this).removeClass('fa-user-circle-o');
        $(this).addClass('fa-user-circle');
    })
    $(document).on('mouseout', '.fa-user-circle', function () {
        $(this).removeClass('fa-user-circle');
        $(this).addClass('fa-user-circle-o');
    })
</script>
</body>
</html>
